<template>
  <div class="mycollection">
    <div class="header space-between padding-24 bg-active">
      <div class="h-back" @click="goBack">
        <img :src="back" alt />
      </div>
      <div class="fs-32 color-f" :class="{active:cur==1}" @click="select(1)">
        专辑&nbsp;
        <span class="color-f fs-28">{{total}}</span>
      </div>
      <div class="fs-32 color-f" :class="{active:cur==2}" @click="select(2)">
        视频&nbsp;
        <span class="color-f fs-28">{{totalvideo}}</span>
      </div>
      <div class="h-right">
        <img :src="play" alt />
      </div>
    </div>
    <div class="contents">
      <div class="music-list" v-if="cur==1">
        <div
          class="list-item bg-f padding-24 space-between"
          v-for="item in musiclist"
          @click="gotoalbumdetail(item)"
        >
          <img :src="item.music_list_photo" alt />
          <div class="right flex-column">
            <p class="fs-32">{{item.music_list_name}}</p>
            <p class="fs-22 color-9">{{item.singer_artistic_name}}，{{item.music_number}}首</p>
          </div>
        </div>
        <div class="center">-- {{text}} --</div>
      </div>
      <div class="video-list padding-24 space-between wrap bg-f" v-if="cur==2">
        <div class="list-item" v-for="item in video" @click="goToVideoDetail(item.dynamic_id)">
          <div class="top">
            <video
              :src="item.video_url"
              autoplay
              :poster="item.video_cover"
              controls
              muted
              v-if="item.dynamic_id==id"
            ></video>
            <div class="img-show" @click.stop="playvideo(item)" v-else>
              <img :src="item.video_cover" alt />
              <div class="play yuan center">
                <p class="play-btn"></p>
              </div>
            </div>
          </div>
          <div class="video-name overFlow-2">{{item.content}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cur: 1,
      page: 1,
      id: null,
      text: "点击加载更多",
      back: require("../../assets/index/back.png"),
      play: require("../../assets/index/play.png"),
      cove: require("../../assets/image/cove.png"),
      musiclist: [],
      total: 0,
      totalvideo: 0,
      video: []
    };
  },
  created() {
    this.myCollectionMusicList();
    this.getvideolist();
  },
  methods: {
    // 跳转到视频详情页
    goToVideoDetail(id) {
      this.$router.push({
        path: "/index/video-Detail",
        query: { id: id }
      });
    },
    myCollectionMusicList() {
      let url = this.$host1 + `home/myCollectionMusicList`;
      this.$axios
        .get(url, {
          params: {
            pageSize: 50,
            page: this.page
          }
        })
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              //this.dynamiclist=resData.data.result
              this.total = resData.data.music_list_num;
              if (this.page == 1) {
                this.musiclist = resData.data.list;
              } else {
                this.musiclist = this.musiclist.concat(resData.data.list);
              }

              if (this.page < this.total / 50) {
                this.text = "点击加载更多";
              } else {
                this.text = "END";
              }
            } else {
              this.musiclist = [];
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.musiclist = [];
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    getvideolist() {
      let url = this.$host1 + `home/dynamic/userLoveVideo`;
      this.$axios
        .get(url)
        .then(res => {
          console.log(res);
          //return
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 200) {
              //this.dynamiclist=resData.data.result
              this.totalvideo = resData.data.total_number;

              this.video = resData.data.result;

              if (this.page < this.total / 50) {
                this.text = "点击加载更多";
              } else {
                this.text = "END";
              }
            } else {
              this.video = [];
              this.AlertWin(resData.message);
            }
          }
        })
        .catch(() => {
          this.video = [];
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    getmore() {
      if (this.page < this.total / 50) {
        this.page++;
        this.AlertWin("加载中，请稍等！");
        this.myCollectionMusicList();
      } else {
        this.AlertWin("没有更多数据啦！");
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    select(i) {
      this.cur = i;
    },
    gotoalbumdetail(i) {
      this.$router.push({
        path: "/index/album-detail",
        query: {
          id: i.music_list_id
        }
      });
    },
    playvideo(i) {
      this.id = i.dynamic_id;
    }
  }
};
</script>
<style lang="scss">
.mycollection {
  .header {
    width: 100%;
    height: 1rem;
    .h-back {
      width: 0.15rem;
      height: 0.26rem;
      img {
        width: 100%;
      }
    }
    .title {
      font-size: 0.36rem;
      font-weight: bold;
    }
    .active {
      font-size: 0.36rem;
      font-weight: bold;
    }
    .h-right {
      width: 0.38rem;
      height: 0.5rem;
      img {
        display: inline-block;
        width: 100%;
      }
    }
  }
  .contents {
    margin-top: 1rem;
    .music-list {
      .list-item {
        height: 1.8rem;
        width: 100%;
        border-bottom: 0.01rem solid #e9e9e9;
        img {
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 0.22rem;
          object-fit: cover;
        }
        .right {
          height: 1.5rem;
          width: calc(100% - 1.8rem);
          //background-color: greenyellow;
        }
      }
      .center {
        height: 1rem;
      }
    }
    .video-list {
      padding-top: 0.2rem;
      .list-item {
        //background-color: greenyellow;
        height: 3rem;
        width: 3.41rem;
        margin-bottom: 0.2rem;
        .top {
          width: 100%;
          height: 1.96rem;
          border-radius: 0.16rem;
          overflow: hidden;
          video {
            width: 100%;
            height: 100%;
            background-color: #333;
          }
          .img-show {
            width: 100%;
            height: 100%;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            .play {
              width: 0.8rem;
              height: 0.8rem;
              border: 0.01rem solid rgba(255, 255, 255, 0.8);
              background-color: rgba(0, 0, 0, 0.5);
              position: absolute;
              top: 50%;
              margin-top: -0.4rem;
              left: 50%;
              margin-left: -0.4rem;
              //border-radius: 0.05rem;
              .play-btn {
                width: 0;
                height: 0;
                margin-left: 0.4rem;
                width: 0px;
                height: 0px;
                border-left: 0.3rem solid transparent;
                border-top: 0.2rem solid transparent;
                border-right: 0.3rem solid #fff;
                border-bottom: 0.2rem solid transparent;
                opacity: 0.7;
                transform: rotate(180deg);
              }
            }
          }
        }
        .video-name {
          //background-color: red;
          line-height: 0.4rem;
          height: 0.8rem;
          overflow: hidden;
          margin-top: 0.2rem;
        }
      }
    }
  }
}
</style>